import React from 'react';
import styles from './style';
import {
  View,
  Text,
  SafeAreaView,
  Image,
  ScrollView,
  TouchableOpacity,
} from 'react-native';
import * as Animatable from 'react-native-animatable';
const seachIcon = require('../../img/search.png');
import ListImg from '../../../../common/component/listImg';
export default class Hot extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tab: ['热门', '摄影', '人物', '风景', '动物', '抽象', '节日'],
      isClick: 0,
    };
  }
  viewclick = (i) => {
    this.setState({isClick: i});
    this[`view${i}`].rubberBand();
  };
  handleViewRef(ref, index) {
    this[`view${index}`] = ref;
  }
  render() {
    let {navigation} = this.props;
    let {tab, isClick} = this.state;

    return (
      <SafeAreaView style={styles.content}>
        <ScrollView
          horizontal={true}
          showsHorizontalScrollIndicator={false}
          style={styles.scrollStyle}>
          {tab.map((item, index) => {
            return (
              <View key={index}>
                <TouchableOpacity
                  activeOpacity={1}
                  onPress={() => this.viewclick(index)}
                  style={[
                    styles.tabItem,
                    {backgroundColor: isClick == index ? '#333' : '#fff'},
                  ]}>
                  <Animatable.View
                    ref={(ref) => this.handleViewRef(ref, index)}>
                    <Text style={[{color: isClick == index ? '#fff' : '#333'}]}>
                      {item}
                    </Text>
                  </Animatable.View>
                </TouchableOpacity>
              </View>
            );
          })}
        </ScrollView>
        <TouchableOpacity style={styles.searchBtn} onPress={() => navigation.navigate('Search')}>
          <Image source={seachIcon} style={styles.searchImg}></Image>
        </TouchableOpacity>
        <View style={styles.listImg}>
          <ListImg navigation={navigation}/>
        </View>
      </SafeAreaView>
    );
  }
}
